<template>
  <layout id="components-layout-demo-custom-trigger">
    <layout-header style="background-color:#166EB5;  height:150px">
      <img src="https://www.sdjzu.edu.cn/image/xx_di_logo1.png" alt="logo"
           style ="height:200px; width:300px;float:left;margin-top: -20px">
      <span style="font-size:28px;line-height:150px;margin-left:-50px;color: #ffffff;">XXXX批发市场管理系统</span>
      <span style=" font-size: 15px; text-align: right;float:right;margin-top:100px;color: white">{{username}}，您好！
      <a style="color:yellow;font-size: 16px;margin-left: 13px;text-decoration: underline" @click="loginout">注 销</a></span>
    </layout-header>

    <layout>
      <layout-sider v-model="collapsed" >
        <menu theme="dark" mode="inline" style="text-align: left">
          <menu-item key="sub1" >
            <router-link :to="{path:'/ShopToCustomer'}">商铺</router-link>
          </menu-item>
          <menu-item key="sub2" >
            <router-link :to="{path:'/Order'}">订单</router-link>
          </menu-item>
          <sub-menu key="sub3">
            <router-link :to="{path:'/Communication'}">交流</router-link>>
          </sub-menu>
        </menu>
      </layout-sider>
      <layout-content
        :style="{ margin: '5px 5px', padding: '24px', background: '#fff', minHeight: '575px', height:'100%' }"
      ><icon type="environment" style="float: left;font-size: 20px;color: #166EB5;margin-top: -5px"/>
        <span  style="float: left;margin-left: 10px;margin-top: -5px">您所在的位置：</span>
        <br>
        <hr style="background-color: #166EB5;height: 5px">
        <router-view/>
      </layout-content>
    </layout>
    <layout-footer style="text-align: center;line-height:5px;background-color:#166EB5;height:50px;color:white">
      版权所有 © 信管191-B1团队
    </layout-footer>
  </layout>
</template>

<script>
  export default {
    name: 'CustomerHome',
    data () {
      return {
        collapsed: false,
        username: window.localStorage.getItem('userName')
      }
    },
    methods: {
      loginout () {
        // 清空token
        window.localStorage.clear()
        this.$router.push('/')
        // 删除vuex中的数据，让当前的界面刷新
        window.location.reload()
      }
    }
  }
</script>

<style scoped>

  #components-layout-demo-custom-trigger .trigger {
    font-size: 20px;
    line-height: 72px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.5s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #166EB5;
  }

  #components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(200,0,238,0);
    margin: 16px;
  }

</style>
